<template>
  <div class="o-a">
    <Page-title :title="title" />
    <div class="f f-jc-b p20 mr10">
      <div class="left-title f f-col f-ai-c f-jc-c ml12">品质</div>
      <div>
        <div class="f f-ai-c f-jc-s">
          <div class="PTH-One f f-ai-c f-jc-s f-w pt20 pb20 mr28">
            <div class="PTH-title font25">{{ data1.title }}</div>
            <div class="consumption-box w553">
              <div class="h61 mt30 f f-ai-c f-jc-c">
                <div v-for="(i, k) in data1.list" :key="k" class="count-item">
                  <div>{{ i.label }}</div>
                  <div>{{ i.value }}</div>
                </div>
              </div>
              <Ring
                :cid="data1.id"
                :title="data1.value"
                :value="data1.label"
                :data="data1.data"
                height="calc(100% - 91px)"
              />
            </div>
          </div>
          <div class="PTH-One f f-ai-c f-jc-s f-w p20 mr28">
            <div class="PTH-title font25">{{ data2.title }}</div>
            <Pie-chart
              :cid="data2.id"
              :data="data2.data"
              :radius="['35%', '58%']"
              :pad-angle="0"
              :legend="true"
              :legOrient="'horizontal'"
              :tooltip="false"
              leg-top="6%"
              leg-left="5%"
              label-size="16px"
              :position="['50%', '62%']"
              :colors="data2.color"
              :pie="true"
              :legItemGap="26"
              :legIconSize="14"
            />
          </div>
          <div class="PTH-One f f-ai-c f-jc-s f-w p20 mr28">
            <div class="PTH-title font25">{{ data3.title }}</div>
            <div class="consumption-box w553">
              <div class="h61 mt30 f f-ai-c f-jc-c">
                <div v-for="(i, k) in data3.list" :key="k" class="count-item">
                  <div>{{ i.label }}</div>
                  <div>{{ i.value }}</div>
                </div>
              </div>
              <Ring
                :cid="data3.id"
                :title="data3.value"
                :value="data3.label"
                :data="data3.data"
                height="calc(100% - 91px)"
              />
            </div>
          </div>
          <div class="PTH-One f f-ai-c f-jc-s f-w p20 mr10">
            <div class="PTH-title font25">{{ data4.title }}</div>
            <Pie-chart
              :cid="data4.id"
              :data="data4.data"
              :radius="['35%', '58%']"
              :pad-angle="0"
              :legend="true"
              :legOrient="'horizontal'"
              :tooltip="false"
              leg-top="6%"
              leg-left="5%"
              label-size="16px"
              :position="['50%', '62%']"
              :colors="data4.color"
              :pie="true"
              :legItemGap="26"
              :legIconSize="14"
            />
          </div>
        </div>
        <div class="f f-ai-c f-jc-s">
          <div class="f f-jc-b">
            <div class="PTH-Two f f-ai-c f-jc-s f-w p18 mr28">
              <div class="PTH-title font26">线路曝光合格率趋势图</div>
              <div v-if="passYList.length" class="target font13 mt6">
                目标值({{ passYList[1].data[0] }}%)
              </div>
              <Line-chart
                v-if="passYList.length"
                cid="line-pass-trend"
                :x-axis="passXList"
                :data="passYList"
                :type="['bar', 'line', 'line']"
                bar-width="30%"
                :legend="false"
                :tooltip="false"
                grid-top="15%"
                grid-bottom="13%"
                smooth
                :bar-label="[true, false]"
                :colors="[
                  ['#F63F3F', '#F63F3F'],
                  ['#FFFE54', '#FFFE54'],
                  ['#F928F6', '#F928F6'],
                ]"
                :limit-colors="['#30C27C', '#30C27C']"
                dotColors="#fff"
              />
              <Empty v-else />
            </div>
            <div class="PTH-Two f f-ai-c f-jc-s f-w p18">
              <div class="PTH-title font26">蚀刻首件合格率趋势图</div>
              <div v-if="etchYList.length" class="target font13 mt6">
                目标值({{ etchYList[1].data[0] }}%)
              </div>
              <Line-chart
                v-if="etchYList.length"
                cid="line-etch-trend"
                :x-axis="etchXList"
                :data="etchYList"
                :type="['bar', 'line', 'line']"
                bar-width="30%"
                :legend="false"
                :tooltip="false"
                grid-top="15%"
                grid-bottom="13%"
                smooth
                :bar-label="[true, false]"
                :colors="[
                  ['#F63F3F', '#F63F3F'],
                  ['#FFFE54', '#FFFE54'],
                  ['#F928F6', '#F928F6'],
                ]"
                :limit-colors="['#30C27C', '#30C27C']"
                dotColors="#fff"
              />
              <Empty v-else />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Ring from "@/views/srceen/workshop/cp/Ring";
export default {
  components: { Ring },
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },

    // 合格率
    data1: {
      type: Object,
      default: () => {
        return {
          id: "chart-1",
          title: "",
          list: [
            { label: "", value: 0 },
            { label: "", value: 0 },
            { label: "", value: 0 },
          ],
          label: "",
          value: "",
          data: [],
        };
      },
    },
    // 不良统计
    data2: {
      type: Object,
      default: () => {
        return {
          id: "chart-2",
          title: "",
          data: [],
          color: [],
        };
      },
    },

    // 蚀刻合格率
    data3: {
      type: Object,
      default: () => {
        return {
          id: "chart-3",
          title: "",
          list: [
            { label: "", value: 0 },
            { label: "", value: 0 },
            { label: "", value: 0 },
          ],
          label: "",
          value: "",
          data: [],
        };
      },
    },
    // 蚀刻不良统计
    data4: {
      type: Object,
      default: () => {
        return {
          id: "chart-4",
          title: "",
          data: [],
          color: [],
        };
      },
    },
    // 合格率趋势x轴
    passXList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 合格率趋势y轴
    passYList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 合格率趋势x轴
    etchXList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 合格率趋势y轴
    etchYList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.o-a {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
}

.left-title {
  font-family: YouSheiBlack;
  font-size: 32px;
  color: #45f4ff;
  letter-spacing: 2px;
  writing-mode: vertical-lr;
  width: 63px;
  height: 916px;
  background: url("~@/assets/home/screen-left-title-bg3.png") no-repeat;
  background-size: 100% 100%;
}

.PTH-One {
  width: 416px;
  height: 447px;
  background: url("~@/assets/img/bg11.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
}

.PTH-Two {
  width: 860px;
  margin-top: 30px;
  height: 441px;
  background: url("~@/assets/img/bg19.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .target {
    margin-left: 10px;
    color: #fff;
    height: 20px;
    line-height: 20px;
    position: relative;
    &::before {
      content: "";
      width: 14px;
      height: 3px;
      background: #fffe54;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}

.PTH-title {
  font-family: YouSheiBlack;
  color: #45f4ff;
  position: absolute;
  left: 0;
  top: -20px;
  text-align: center;
  width: 100%;
}

.consumption-box {
  height: 100%;
  position: relative;
  background-size: 100% 100%;
  .count-item {
    min-width: 130px;
    text-align: center;
    position: relative;
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0) 100%
      );
    }
    &:last-child:after {
      display: none;
    }
    > div:first-child {
      font-size: 14px;
      color: #fff;
    }
    > div:last-child {
      margin-top: 10px;
      font-size: 24px;
      color: #45f4ff;
    }
  }
}
</style>
